<!--预览视频 -->
<template>
<!--    <div v-if="videoControl || videoExamining">-->

        <el-button type="primary" :icon="VideoPlay" circle @click="coursePreview" v-show="videoControl || videoExamining" />
    <el-button type="primary" circle @click="textPreview" v-show="textControl || textExamining" ><el-icon><Document /></el-icon></el-button>
        <el-dialog v-model="previewDialogVisible"
                   append-to-body="true"
                   title="课程预览"
                   center
                   @close="closeDialog">
            <div class="videoDiv">
                <video controls="true" width="700" poster ref="videoRef"  >
                    <source :src="course.url" type="video/mp4" />
                </video>
            </div>
        </el-dialog>
<!--    </div>-->
<!--    <div v-if="textControl || textExamining">-->
<!--        <el-button type="primary" circle @click="textPreview" ><el-icon><Document /></el-icon></el-button>-->
        <el-dialog v-model="textPreviewVisible"
                   append-to-body="true"
                   title="文档预览"
                   center
                   v-show="textControl || textExamining">
            <div class="videoDiv">
                <vue-office-docx
                        :src="docx"
                        @rendered="renderedHandler"
                        @error="errorHandler"
                        v-show="course.textualType == 'docx'"
                />
                <vue-office-pdf
                        :src="pdf"

                        @rendered="renderedHandler"
                        @error="errorHandler"
                        v-show="course.textualType == 'pdf'"
                />

            </div>
        </el-dialog>

</template>

<script setup>
    import {reactive, ref,onMounted} from 'vue'
    import {VideoPlay,Document} from '@element-plus/icons-vue'

    //docx的
    import VueOfficeDocx from '@vue-office/docx'
    import '@vue-office/docx/lib/index.css'
    //pdf的
    import VueOfficePdf from '@vue-office/pdf'



    const videoRef=ref();
    const props = defineProps(['course','videoControl','textControl','videoExamining','textExamining'])

    const videoControl = props.videoControl;
    const textControl = props.textControl;
    const videoExamining  = props.videoExamining;
    const textExamining = props.textExamining;
    const course = props.course
    const previewDialogVisible = ref(false);
    const textPreviewVisible = ref(false);

    const docx = ref("/"+course.url)
    const pdf = ref("/"+course.url);



    const coursePreview = () => {
        previewDialogVisible.value = true;
    }
    const closeDialog= ()=>{
        videoRef.value.pause();
    }

    const textPreview = ()=>{
        textPreviewVisible.value = true;
    }

    // docx作为参数通过父组件传参
    const renderedHandler=()=>{
        // console.log("渲染完成")
    }
    const errorHandler=()=>{
        // console.log("渲染失败")
    }
</script>

<style scoped>
    .videoDiv {
        display: flex;
        justify-content: center;
    }
    video{
        height: 100%;
    }
</style>